
    <!-- {{this.$route.params.id}}
    {{this.$route.params.xgqm}} -->
<template>
  <div style="text-align: center;width: 100%;" >{{this.$route.params.id}}学生课表</div>

  <div>
    <div id="coursesTable" ></div>
  </div>
</template>

<script>
var hhha=["专业","","体育","英语","数学","数学","美术","数学","英语","英语","语文","语文","音乐","语文"]

import timetable from 'timetables'
export default {
  components: {},
  data () {
    return {
      styles: {
        Gheight: 50,
        leftHandWidth: 50,
        palette: ['#ff6633', '#eeeeee']
      },
      courselist: [
        [hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))]],
        [hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))]],
        [hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))]],
        [hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))]],
        [hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))], hhha[Math.floor(Math.random() * (hhha.length))]]
      ],
      timetableType: [
        [{index: '1', name: '8:30'}, 1],
        [{index: '2', name: '9:30'}, 1],
        [{index: '3', name: '10:30'}, 1],
        [{index: '4', name: '11:30'}, 1],
        [{index: '5', name: '12:30'}, 1],
        [{index: '6', name: '14:30'}, 1],
        [{index: '7', name: '15:30'}, 1],
        [{index: '8', name: '16:30'}, 1]
      ],
      week: ['周一', '周二', '周三', '周四', '周五'],
      timetable: null
    }
  },
  mounted () {
    this.timetable =
      new timetable({
        el: '#coursesTable',
        timetables: this.courselist,
        week: this.week,
        highlightWeek: new Date().getDay(),
        timetableType: this.timetableType,
        styles: this.styles
      })
  }
}
</script>

<style>
  #coursesTable {
    padding: 15px 10px;
  }

  .Courses-head {
    background-color: #edffff;
  }

  .Courses-head > div {
    text-align: center;
    font-size: 14px;
    line-height: 28px;
  }

  .left-hand-TextDom, .Courses-head {
    background-color: #f2f6f7;
  }

  .Courses-leftHand {
    background-color: #f2f6f7;
    font-size: 12px;
  }

  .Courses-leftHand .left-hand-index {
    color: #9c9c9c;
    margin-bottom: 4px !important;
  }

  .Courses-leftHand .left-hand-name {
    color: #666;
  }

  .Courses-leftHand p {
    text-align: center;
    font-weight: 900;
  }

  .Courses-head > div {
    border-left: none !important;
  }

  .Courses-leftHand > div {
    padding-top: 5px;
    border-bottom: 1px dashed rgb(219, 219, 219);
  }

  .Courses-leftHand > div:last-child {
    border-bottom: none !important;
  }

  .left-hand-TextDom, .Courses-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  .Courses-content > ul {
    border-bottom: 1px dashed rgb(219, 219, 219);
    box-sizing: border-box;
  }

  .Courses-content > ul:last-child {
    border-bottom: none !important;
  }

  .highlight-week {
    color: #02a9f5 !important;
  }

  .Courses-content li {
    text-align: center;
    color: #666666;
    font-size: 14px;
    line-height: 50px;
  }

  .Courses-content li span {
    padding: 6px 2px;
    box-sizing: border-box;
    line-height: 18px;
    border-radius: 4px;
    white-space: normal;
    word-break: break-all;
    cursor: pointer;
  }

  .grid-active {
    z-index: 9999;
  }

  .grid-active span {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }
</style>